<template>
	<view class="cooperation_contract_container">
		<view class="cooperation_contract_box">
			<view class="top_box">
				<!-- top -->
				<view class="contract_img_box">
					<image :src="contractImg" mode="widthFix" class="contract_img"></image>
				</view>
				<view class="contract_check" @click="handlerCheckContract">
					查看浏览合作合同内容
				</view>
			</view>

			<!-- bottom -->
			<view class="bottom_box">
				<u-form :model="userForm" ref="formUser">
					<u-form-item label="身份证姓名" prop="name" label-width="200">
						<u-input v-model="userForm.name" :clearable="false" placeholder="请输入身份证姓名" />
					</u-form-item>

					<u-form-item label="身份证号码" prop="card" label-width="200">
						<u-input v-model="userForm.card" :clearable="false" placeholder="请输入身份证号码" />
					</u-form-item>

					<u-form-item label="手机号码" prop="phone" label-width="200">
						<u-input v-model="userForm.phone" maxlength="11" :clearable="false" placeholder="请输入手机号码" />
					</u-form-item>

					<u-form-item label="电子邮箱" prop="email" label-width="200">
						<u-input v-model="userForm.email" :clearable="false" placeholder="请输入电子邮箱" />
					</u-form-item>

					<u-form-item label="" class="input_read">
						<u-radio-group v-model="userForm.radioRead" prop="radioRead">
							<u-radio v-for="(item, index) in readList" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{ item.name }}
								<span style="font-size: 30rpx;font-weight: 400; color: #4F96FF;"
									@click="handlerRead(0)">《代理合同协议》</span>
								及
								<span style="font-size: 30rpx;font-weight: 400; color: #4F96FF;"
									@click="handlerRead(1)">《隐私协议》</span>
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<view class="bottom_tip">
						注意：提交后我们将于三个工作日内审核并与您联系，合同类型为电子合同！
					</view>

					<view class="login_btn_box">
						<view class="login_btn" @click="handlerSubmit">
							提交申请
						</view>
					</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836705da792_1719887621.jpg',
				userForm: {
					name: '',
					card: '',
					phone: '',
					email: '',
					radioRead: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入身份证姓名',
						trigger: ['change', 'blur'],
					}],

					card: [{
						required: true,
						message: '请输入身份证号码',
						trigger: ['change', 'blur'],
					}],

					phone: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur'],
					}],

					email: [{
						required: true,
						message: '请输入电子邮箱',
						trigger: ['change', 'blur'],
					}],
				},

				readList: [{
					name: '我已阅读'
				}],
			}
		},
		methods: {
			//查看浏览合作合同内容 
			handlerCheckContract() {},

			// 点击协议
			handlerRead(val) {},

			// 提交申请
			handlerSubmit() {
				this.$refs.formUser.validate(valid => {
					if (this.userForm.radioRead == '') {
						uni.showToast({
							title: '请勾选我已阅读',
							icon: 'none'
						})
						return
					}

					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.formUser.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.cooperation_contract_container {

		.cooperation_contract_box {

			.top_box {
				background: #fff;
				border-radius: 12rpx;
				padding: 0 10rpx 30rpx;

				.contract_img_box {
					width: 100%;

					.contract_img {
						width: 100%;
						height: 100%;
					}
				}

				.contract_check {
					font-size: 30rpx;
					color: #0d00ff;
					text-align: center;
				}
			}

			.bottom_box {
				background: #fff;
				border-radius: 12rpx;
				padding: 0 30rpx 40rpx;
				margin-top: 20rpx;

				.bottom_tip {
					font-size: 26rpx;
					color: #9b9ba1;
					padding: 20rpx 0 40rpx;
				}

				.login_btn_box {
					display: flex;
					justify-content: center;

					.login_btn {
						width: 400rpx;
						height: 70rpx;
						border-radius: 10rpx;
						color: #fff;
						background: #ff8f00;
						font-size: 30rpx;
						line-height: 70rpx;
						text-align: center;
					}
				}

			}
		}
	}
</style>